<template>
  <view class="container">
    <view class="left-side"></view>
    <view class="right-side"></view>
  </view>
</template>

<script>
export default {
  // 小程序的逻辑部分
  data() {
    return {};
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between; /* 左右分布 */
  align-items: center; /* 垂直居中对齐 */
  width: 200px;
  height: 200px;
  background-color: #e0e0e0; /* 背景颜色 */
  border-radius: 50px; /* 圆角 */
}

.left-side {
  width: 200px; /* 左边宽度 */
  height: 200px; /* 左边高度 */
  background-color: #4caf50; /* 左侧颜色 */
  border-top-left-radius: 50px; /* 左上角圆角 */
  border-bottom-left-radius: 50px; /* 左下角圆角 */
}

.right-side {
  width: 300px; /* 右边宽度 */
  height: 200px; /* 右边高度 */
  background-color: #2196f3; /* 右侧颜色 */
  border-top-right-radius: 50px; /* 右上角圆角 */
  border-bottom-right-radius: 50px; /* 右下角圆角 */
}
</style>
